<template>
    <div id="updateProvider">
        <table>
            <tr>
                <td>供应商编号</td>
                <td><el-input v-model="provider.providerCode" @input="checkProvider"></el-input></td>
                <td>供应商名称</td>
                <td><el-input v-model="provider.providerName"></el-input></td>
            </tr>
            <font ref="providerCheck" style="font-size: 12px;position:relative; left: 80px;"></font>
            <br>
            <tr>
                <td>供应商类别</td>
                <td><el-select v-model="provider.providerTypeId" placeholder="类别">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select></td>
                <td>业务员</td>
                <td><el-select v-model="provider.employeeId">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select></td>
            </tr>
            <br>
            <tr>
                <td>期初应付款</td>
                <td><el-input v-model="provider.shouldPay"></el-input></td>
                <td>期初预付款</td>
                <td><el-input v-model="provider.wishPay"></el-input></td>
            </tr>
            <br>
            <tr>
                <td>开户银行</td>
                <td><el-input v-model="provider.bankName"></el-input></td>
                <td>银行账号</td>
                <td><el-input v-model="provider.bankAccount"></el-input></td>
            </tr>
            <br>
            <tr>
                <td>交货方式</td>
                <td><el-select v-model="provider.dellId">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select></td>
                <td>是否物流公司</td>
                <td><el-select v-model="provider.isWuliu">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select></td>
            </tr>
            <br>
        </table>
        <p>联系人信息</p>
        <br>

        <table id="contact">
            <tr>
                <th></th>
                <th>联系人</th>
                <th>电话</th>
                <th>邮箱</th>
                <th>联系地址</th>
            </tr>
            <tr v-for="(contact, index) in contactList" :key="index">
                <td style="width: 120px;">
                    <el-button size="mini" @click="addRow"><i class="el-icon-circle-plus-outline"></i></el-button>
                    <el-button size="mini" @click="reduceRow"><i class="el-icon-remove-outline"></i></el-button>
                </td>
                <td><el-input v-model="contact.contactName" size="small" style="width: 120px;"></el-input></td>
                <td><el-input v-model="contact.mobile" size="small" style="width: 120px;"></el-input></td>
                <td><el-input v-model="contact.email" size="small" style="width: 120px;"></el-input></td>
                <td><el-input v-model="contact.contactAddress" size="small" style="width: 120px;"></el-input></td>
            </tr>
        </table>
        <br>
        <el-input style="width: 600px;" type="textarea" placeholder="备注" v-model="provider.remark"></el-input>
        <el-button @click="updateProvider" type="primary"
            style="position: absolute;bottom: 20px;right: 100px;width: 70px;" :disabled="saveFlag">保存</el-button>
    </div>
</template>

<script>
export default {
    name: 'UpdateProvider',
    data() {
        return {
            saveFlag: false
        }
    },
    props: ["provider", "contactList"],
    methods: {
        addRow() {
            this.contactList.push({ contactName: '', mobile: '', email: '', contactAddress: '' })
        },
        reduceRow() {
            if (this.contactList.length > 1) {
                this.contactList.pop()
            }
        },
        updateProvider() {
            //手机号正则
            const mobileRegix = /^1[3-9]\d{9}$/
            //金额正则
            const moneyRegix = /^\d+(\.\d{1,2})?$/

            if (this.provider.providerCode == '') {
                this.errorMessage("请填写供应商编号")
                return
            }
            if (this.provider.providerName == '') {
                this.errorMessage("请填写供应商名称")
                return
            }
            if (this.provider.shouldPay !== '') {
                if (!moneyRegix.test(this.provider.shouldPay)) {
                    this.errorMessage("期初应收款格式为两位小数或整数")
                    return
                }
            }
            if (this.provider.wishPay !== '') {
                if (!moneyRegix.test(this.provider.wishPay)) {
                    this.errorMessage("期初预收款格式为两位小数或整数")
                    return
                }
            }
            for (const contact of this.contactList) {
                if (contact.contactName == '') {
                    this.errorMessage("请填写联系人姓名");
                    return;
                }
                if (contact.mobile == '') {
                    this.errorMessage("请填写联系电话");
                    return;
                }
                if (!mobileRegix.test(contact.mobile)) {
                    this.errorMessage("请填写正确的电话");
                    return;
                }
            }
            const formdata = new FormData()
            formdata.append('provider', JSON.stringify(this.provider))
            formdata.append("listStr", JSON.stringify(this.contactList))
            this.axios.post('/info/provider/updateProvider',
                formdata
            ).then(rs => {
                if (rs.data.code = 200) {
                    this.successMessage("修改成功")
                    this.provider = {}
                    this.contactList = [
                        {
                            contactName: '',
                            mobile: '',
                            email: '',
                            contactAddress: '',
                        }]
                    this.updateValue()
                }
            })
        },
        successMessage(msg) {
            this.$message({
                message: msg,
                type: 'success'
            });
        },
        errorMessage(msg) {
            this.$message({
                message: msg
                ,
                type: 'error'
            })
        },
        checkProvider() {
            this.axios.get("/info/provider/checkProvider", {
                params: {
                    providerCode: this.provider.providerCode
                }
            }).then(rs => {
                if (rs.data.provider != null) {
                    this.$refs.providerCheck.innerHTML = "供应商已存在"
                    this.$refs.providerCheck.style.color = "red"
                    this.saveFlag = true
                } else {
                    this.$refs.providerCheck.innerHTML = ""
                    this.saveFlag = false
                }
            })
        },
        updateValue() {
            this.$emit('update:dialogUpdate', false);
        },

    }
}
</script>

<style scoped>
#updateProvider {
    width: 100%;
    height: 450px;
    overflow: scroll;
    /* background-color: pink; */
}

#contact {
    width: 90%;
    margin: auto;
    border-collapse: collapse;
    color: #707276;
}

#contact th,
#contact td {
    border: 1px #c0c4cc solid;
    height: 35px;
    min-width: 30px;
}

p {
    color: #4b4a4a;
    font-size: 18px;

}

.el-input {
    width: 240px;
}

.el-button {
    width: 40px;
    margin-left: 0px;
}

table td :not([id=contact]) {
    text-align: left;
    padding-right: 10px;
    /* padding-top: 10px;
    padding-bottom: 10px; */
}

td:nth-child(odd) {
    text-align: center;
    padding-right: 10px;
}
</style>